<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <header>header</header>
  <nav>menu</nav>
  <section>hero</section>
  <main>main</main>
  <figure>image</figure>
  <aside>extra</aside>
  <article>brand</article>
  <footer>footer</footer>
</div>
</template>

<style scoped lang="scss">
.wrap {

  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto 30vh 1fr 1fr 1fr auto;
  grid-template-areas:
    "header  header  menu  menu  menu  menu  menu  menu"
    "hero    hero    hero  hero  hero  hero  hero  hero"
    "main    main    main  main  main  ...   image image"
    "main    main    main  main  main  ...   extra  extra"
    "...     brand   brand brand brand brand brand  ..."
    "footer  footer  footer footer footer footer footer footer"
  ;

  width: 100vw;
  min-height: 100vh;
  font-family: "Wxo", Arial, sans-serif;
  background-color: #fff;
  color: #fff;

  & > * {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: clamp(0.8rem, 1rem + 1vw, 1.25rem);
    text-shadow: 1px 1px 0 rgb(0 0 0 / 0.5);
    text-transform: uppercase;
  }

  header {
    background-color: #000;
    grid-area: header;
  }

  nav {
    background-color: #ef3c4f;
    grid-area: menu;
  }

  footer {
    background-color: #0365c0;
    grid-area: footer;
  }

  main {
    background-color: #24344b;
    grid-area: main;
  }

  aside {
    background-color: #4dbd97;
    grid-area: extra;
  }

  section {
    background-color: #4c86c6;
    grid-area: hero;
  }

  figure {
    background-color: #c1e4e6;
    margin: 0;
    grid-area: image;
  }

  article {
    background-color: #ffd169;
    grid-area: brand;
  }
}
</style>
